<template>
 <div class="demo">
   <el-button type="primary" @click="handleOpenDialog">打开</el-button>
   <el-button type="primary" @click="handleOpenFormDialog">打开1</el-button>
   <table-dialog ref="tableDialog" v-if="visible"></table-dialog>
   <form-table ref="formTable" v-if="visible1"></form-table>
   <el-card>
     <template v-for="(item,index) in list">
       <div :key="index" class="item">
         <div class="list-box">
           <div class="left">问</div>
           <div class="middle">
             <p :class="{hidden: !selectIndex.includes(index)}">{{item.content}}</p>
             <p>留言时间：{{item.createTime}}</p>
           </div>
           <div class="right" @click="handleClick(index)">
             <i v-if="!selectIndex.includes(index)" class="el-icon-arrow-down"></i>
             <i v-else class="el-icon-arrow-up"></i>
           </div>
         </div>
         <div class="list-box">
           <div class="left">答</div>
           <div class="middle">
             <p class="hidden">{{item.reply}}</p>
             <p><span>答复时间：{{item.releaseTime}}</span> <span>答复单位：{{item.orgname}}</span></p>
           </div>
           <div class="right">
           </div>
         </div>
       </div>
     </template>
   </el-card>
 </div>
</template>

<script>
import TableDialog from '@/views/Demo/dialog'
import FormTable from '@/views/Demo/formTable'
export default {
  name: 'index',
  components: { TableDialog, FormTable },
  data () {
    return {
      visible: false,
      visible1: false,
      selectIndex: [],
      list: [
        {
          content: '银保监会要求村镇银行不得跨区域经营，那设立在城区的村镇银行的经营区域是注册地所在区还是除县域内的市区都可以？',
          createTime: '2020-12-01 00:00:00',
          id: 59,
          orgname: '银保监会',
          releaseTime: '2020-12-08 00:00:00',
          reply: '您好，根据《中国银监会关于进一步促进村镇银行健康发展的指导意见》（银监发〔2014〕46号）第六部分第二款规定，村镇银行原则上应在注册地所在的县（市、旗、区）依法经营'
        },
        {
          content: '《中国保监会关于做好保险专业中介业务许可工作的通知》（保监发〔2016〕82号）规定：自然人股东出资的，申请业务许可的保险专业中介机构应向保险监管部门提交材料。↵请问这个“自然人股东”是指保险中介机构的直接股东吗？还是说需要向上穿透，看有没有自然人股东呢？如果穿透的话，需要穿透到几级呢？',
          createTime: '2020-12-02 00:00:00',
          id: 60,
          orgname: '银保监会',
          releaseTime: '2020-12-08 00:00:00',
          reply: '您好，此处“自然人股东”指保险中介机构的直接股东。'
        },
        {
          content: '《中国银保监会农村中小银行机构行政许可事项实施办法》第一百零九条第三款规定，拟任农村商业银行内审部门负责人，应取得国家或国际认可的会计、审计专业技术职称。↵    根据以上规定，农商银行内审部门负责人是否取得会计或审计专业技术资格之一即可，而不是必须取得审计专业资格。↵    不知理解是否正确。',
          createTime: '2020-11-11 00:00:00',
          id: 57,
          orgname: '银保监会',
          releaseTime: '2020-11-18 00:00:00',
          reply: '拟任农村商业银行内审部门负责人，应取得国家或国际认可的会计或审计专业技术职称之一即可。'
        }
      ]
    }
  },
  methods: {
    handleOpenDialog () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.tableDialog.init()
      })
    },
    handleOpenFormDialog () {
      this.visible1 = true
      this.$nextTick(() => {
        this.$refs.formTable.init()
      })
    },
    handleClick (index) {
      console.log(index)
      this.selectIndex.includes(index)
      if (!this.selectIndex.includes(index)) {
        this.selectIndex.push(index)
      } else {
        this.selectIndex = this.selectIndex.filter(item => item !== index)
      }
      console.log(this.selectIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  padding: 10px 0px;
  border-bottom: 1px dashed #ccc;
  .list-box {
    display: flex;
    width: 100%;
    flex: 1;
    align-content: baseline;
    //flex-direction: row;
    .left,.right {
      box-sizing: border-box;
      width: 30px;
    }
    .left {
      padding-top: 3px;
    }
    .right {
      color: #3B91FF;
      font-weight: bold;
    }
    .middle {
      box-sizing: border-box;
      flex: 1;
      width: calc(100% - 60px);
      line-height: 26px;
      font-size: 14px;
      font-weight: 400;
      font-family: "微软雅黑", Arial, Helvetica, sans-serif;
      color: #333;
      p {
        &:last-child {
          color: #989898;
        }
        span {
          &:last-child {
            margin-left: 30px;
          }
        }
      }
      .hidden {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}

</style>
